<template>
	<view class="box">
		<view class="header">
			房屋信息
		</view>
		<view class="form">
			<view class="plot">
				小区：
				<picker  :range="bindlist" :range-key="'name'" @change="gethousename">
					<view class="plotname">{{buildingName}}</view>
					<image src="https://s1.ax1x.com/2022/11/25/zY4mef.png" mode=""></image>
				</picker>
			</view>
			<view class="housecode">
				楼栋房号：
				<text @click="goRoomList">{{houseName}}</text>
				<image src="https://s1.ax1x.com/2022/11/25/zY4mef.png" mode=""></image>
			</view>
			<view class="plot" style="border-bottom: 0;">
				小区：
				<picker :range="usertype" :range-key="'name'" @change="getType">
					<view class="plotname">{{userTypeName}}</view>
					<image src="https://s1.ax1x.com/2022/11/25/zY4mef.png" mode=""></image>
				</picker>
			</view>
		</view>
		<view class="header">
			个人信息
		</view>
		<view class="name">
			姓名：
			<input type="text" placeholder="请填写姓名" v-model='addData.name'>
		</view>
		<view class="tel" style="border-bottom: 0;">
			电话：
			<input type="text" placeholder="请输入手机号" maxlength='11' v-model="addData.mobile">
		</view>
		<view class="btn" @click="addHouse">
			提交
		</view>
	</view>
</template>

<script>
	import {reqhouselist,requsertype,reqaddHouse} from '../../utils/api.js'
	export default {
		data() {
			return {
				buildingName: '请选择小区', // 楼栋名称
				houseName: '请选择楼栋房号', // 楼栋房号
				userTypeName: '请选择住户类型', // 住户类型 [租户/业主]
				bindlist:[], // 楼栋列表小区列表 picker下拉框
				building:{} ,// 楼栋obj,
				usertype:[],
				addData:{ // 添加房屋参数
					id: 0,
					name: "", // 用户名
					houseid: 0,
					usertype: 0, // 居民类型
					usertypeName:'',
					sex: -1,
					mobile: "",
					building:'',
					houseName:'',
					cardid: "211102200805281516",
					nation: "汉族",
					usernative: "河北省邯郸市",
				}
			}
		},
		created(){
			this.gethouselist()
			this.getusertype()
		},
		onShow(){
			const houseName=this.$store.state.house.title.title
			this.houseName=houseName?houseName:this.houseName
		},
		methods:{
			// 获取小区
			async gethouselist(){
				let res = await reqhouselist()
				if(res.errCode===10000){
					this.bindlist = res.data.list
				}
			},
			// 获取户主类型
			async getusertype(){
				let res =  await requsertype()
				console.log(res);
				if(res.errCode===10000){
					this.usertype = res.data.list
				}
			},
			// 房间号
			gethousename(e){
				this.buildingName = this.bindlist[e.detail.value].name
				this.addData.building=this.bindlist[e.detail.value].name
				this.building = this.bindlist[e.detail.value]
					
			},
			// 户主类型
			getType(e){
				console.log(e);
				this.userTypeName = this.usertype[e.detail.value].name
				this.addData.usertypeName=this.usertype[e.detail.value].name
				this.addData.usertype=this.usertype[e.detail.value].id
			},
			goRoomList(){
				uni.navigateTo({
					url:`../houseList1/houseList1?building=${JSON.stringify(this.building)}`
				})
			},
			async addHouse(){
				if(!this.building){
					uni.showToast({title:'请先选择小区',icon:'none'})
					return;
				}
				else if(this.houseName == '请选择楼栋房号') {
					uni.showToast({title:'请填写楼栋号',icon:'none'})
					return;
				}
				else if(!this.addData.usertype){
					uni.showToast({title:'请先选择住户类型',icon:'none'})
					return;
				}
				
				else if(!this.addData.name){
					uni.showToast({title:'请先输入姓名',icon:'none'})
					return;
				}
				else if(this.addData.mobile.length < 11){
					uni.showToast({title:'请先输入正确手机号',icon:'none'})
					return;
				} 
				this.addData.houseid =this.$store.state.house.buildingid.buildingid
				this.addData.houseName =this.houseName
				let res = await reqaddHouse(this.addData)
				console.log(res);
				if  (res.errCode !== 10000) {
					
					uni.showToast({
						title: '添加失败',
						icon: 'error'
					})
					
				}else{
					uni.setStorageSync("buildInfo",res.data)
					uni.navigateTo({
						url:"/pages/mine/housesuccess/housesuccess"
					})
					this.addData = {}
					this.buildingName = '请选择小区'
					this.houseName = ''
					this.userTypeName = '请选择住户类型'
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.header {
		width: 100%;
		height: 72rpx;
		background-color: #f0f0f0;
		line-height: 72rpx;
		padding: 0 30rpx;
		font-size: 25rpx;
	}

	.form {
		width: 100%;
		height: 320rpx;

		.plot {
			width: 720rpx;
			height: 98rpx;
			border-bottom: 1rpx solid #efefef;
			margin-left: 30rpx;
			line-height: 98rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;

			.plotname {
				margin-right: 72rpx;
			}

			image {
				width: 50rpx;
				height: 53rpx;
				position: absolute;
				top: 22rpx;
				right: 10rpx;
			}
		}

		.housecode {
			width: 720rpx;
			height: 98rpx;
			border-bottom: 1rpx solid #efefef;
			margin-left: 30rpx;
			line-height: 98rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			position: relative;

			text {
				margin-right: 72rpx;
			}

			image {
				width: 50rpx;
				height: 53rpx;
				position: absolute;
				top: 22rpx;
				right: 10rpx;
			}
		}
	}
	.name{
		width: 720rpx;
		height: 98rpx;
		border-bottom: 1rpx solid #efefef;
		margin-left: 30rpx;
		line-height: 98rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		input{
			width: 	230rpx;
			height: 98rpx;
			font-size: 28rpx;
		}
	}
	.tel{
		width: 720rpx;
		height: 98rpx;
		border-bottom: 1rpx solid #efefef;
		margin-left: 30rpx;
		line-height: 98rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		input{
			width: 	255rpx;
			height: 98rpx;
			font-size: 28rpx;
		}
	}
	.btn{
		width: 510rpx;
		height: 75rpx;
		background-color: #5da5f1;
		text-align: center;
		line-height: 75rpx;
		color: #fff;
		border-radius: 50rpx;
		margin-top: 140rpx;
		margin-left: 133rpx;
	}
</style>
